<!--  -->
<template>
  <div class="wrap" :loading="loading">
    <!-- <div class="lg-title">
      <span>工业监测审计系统</span>
    </div> -->
    <div class="main" :style="{backgroundImage:`url(${loginBackground})`}">
      <div class="login">
        <div class="login-name">
          <i class="iconfont icon-anquandunpai"></i><span>账号登录</span>
        </div>
        <div class="login-form">
          <el-form :model="loginForm" :rules="LoginRules" ref="loginForm" :show-message = false>
            <el-row :gutter="24">
              <el-col :xs="12" :sm="12" :lg="12">
                <el-form-item prop="username">
                  <el-input prefix-icon="el-icon-user" v-model="loginForm.username" placeholder="请输入账号" @keyup.enter.native="loginEnterFun" maxlength="15">
                    <i style="cursor: pointer" slot="suffix" @click="loginForm.username = ''" class="el-icon-circle-close" />
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="12">
                <el-form-item prop="password">
                  <el-input v-model="loginForm.password" :type="type === true ? 'text':'password'" placeholder="请输入密码" @keyup.enter.native="handleLogin('loginForm')" maxlength="32">
                    <svg-icon style="cursor: pointer" slot="suffix" @click="type = !type" :icon-class="type ? 'eye-open' : 'eye'" />
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item class="form-submit">
              <el-button type="primary" class="submit"  @click="handleLogin('loginForm')">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="login-method">
          <img :src="loginLogoIcon" alt="">
          <p>{{companyName}}</p>
          <!-- <div class="yuan yuan1"></div>
          <div class="yuan yuan2"></div><svg-icon icon-class="password" />
          <div><i class="iconfont icon-zhifubao"></i><span>支付宝</span></div>
          <div><i class="iconfont icon-weixin"></i><span>微信</span></div> -->
        </div>
      </div>
    </div>
    <!-- 首次登录弹窗 -->
    <el-dialog title="修改密码" :visible.sync="centerDialogVisible"  width="40%" @close='closeDialog' :close-on-press-escape = false  :close-on-click-modal = false >
        <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="30%">
            <!-- <el-card shadow="never" class="border-none margin-t24"> -->.
                <el-row :gutter="24">
                    <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item  label="原始密码：" prop="OldPwd">
                            <el-input  size="small" auto-complete="off" style="width:70%" show-password v-model="ruleForm.OldPwd"  placeholder="请输入原始密码"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item  label="新密码：" prop="NewPwd">
                            <el-input  size="small" auto-complete="off" style="width:70%" show-password v-model="ruleForm.NewPwd"  placeholder="请输入新密码"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :sm="24" :md="24" :lg="24">
                        <el-form-item  label="再次输入密码：" prop="againNewPwd">
                            <el-input  size="small" auto-complete="off" style="width:70%" show-password v-model="ruleForm.againNewPwd"  placeholder="请再次输入新密码"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            <!-- </el-card> -->
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button  size="small" class="newadd" type="primary" @click="determineClick('ruleForm')">确定</el-button>
        </span>
    </el-dialog>
    <!-- <right-panel>
      <div class="theme">
        <router-link to="/login">主题1</router-link>
        <router-link to="/login2">主题2</router-link>
      </div>
    </right-panel> -->
  </div>
</template>

<script>
// import RightPanel from '@/components/RightPanel'
import { motify } from '@/api/user'
export default {
  // components: {
  //   RightPanel,
  // },
  data() {
    let validateNewPassword = (rule, value, callback) => {
      let reg2 = /^(?![A-z0-9]+$)(?=.[^%&',;=?$\x22])(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,20}$/;
      if (value != '') {
        if (!reg2.test(value)) {
          callback(new Error("密码至少8-20位，包括数字、大小写字母和特殊字符"))
        }else{
          if (value === this.ruleForm.OldPwd) {
            callback(new Error('新密码不能与原密码相同!'))
          } else {
            callback()
          }
        }
      }else{
        callback(new Error("请输入新的密码"))
      }

    }
    let validateNewPassword2 = (rule, value, callback) => {
      if (value != '') {
        if (value !== this.ruleForm.NewPwd) {
          callback(new Error('与新密码不一致!'))
        } else {
          callback()
        }
      }else{
        callback(new Error("请再次输入密码"))
      }
    }
    return {
      loading: false,
      type: false,
      loginForm:{
        username:'',
        password:''
      },
      ruleForm:{
        OldPwd:'',
        NewPwd:'',
        againNewPwd:''
      },
      centerDialogVisible:false,
      rules:{
        OldPwd:[{ required: true, message: '请输入原密码', trigger: 'blur' }],
        NewPwd:[{ required: true, validator: validateNewPassword, trigger: 'blur' }],
        againNewPwd:[{ required: true, validator: validateNewPassword2, trigger: 'blur' }]
      },
      LoginRules:{
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          // { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        password:[
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      companyName: '',
      loginLogoIcon: '',
      loginBackground: ''
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    // 鑫塔网络科技有限公司
    // this.companyName = process.env.NODE_ENV === 'development' ? '综合审计' : Glod.companyName
    // this.loginLogoIcon = process.env.NODE_ENV === 'development' ? require('../../assets/logo.png') : Glod.loginLogoIcon
    // this.loginBackground = process.env.NODE_ENV === 'development' ? require('../../assets/zhsj_bg.jpg') : Glod.loginBackground
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    loginEnterFun(e){
      var keyCode = window.event? e.keyCode:e.which;
      var val = e.target.value;
      if(keyCode == 13 && val){
        this.login('loginForm')
      }
    },
    handleLogin(){
      this.$refs.loginForm.validate(async valid => {
        if (valid) {
          this.userLogin();
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    userLogin(){
      this.loading = true
      const sm3 = require('sm-crypto').sm3;
      const paramData = {
        Header:{
          "CmdCode":"Login"
        },
        Data:{
          UserID: this.loginForm.username,
          Password: sm3(this.loginForm.password)
        }
      };
      this.$store.dispatch('user/login', paramData).then(() => {
          this.loading = false;
          this.$router.push({ path:'/'})
      }).catch((error) => {
        console.log(error);
        // console.log(this.$store.state.user.status);
        if (error.Status.StatusCode === 32769) {
            this.$confirm('用户帐户过期，请修改密码?', '提示',  {
              confirmButtonText: '确定',
              showCancelButton:false,
              showClose:false,
              closeOnClickModal:false,
              closeOnPressEscape:false,
              type: 'warning'
            }).then(() => {
              // this.$router.push('/changePassword');
              this.centerDialogVisible = true;
            });
        }else if (error.Status.StatusCode === 8467 ) {
          this.$confirm('首次登录，请修改密码?', '提示',  {
            confirmButtonText: '确定',
            showCancelButton:false,
            showClose:false,
            closeOnClickModal:false,
            closeOnPressEscape:false,
            type: 'warning'
          }).then(() => {
            this.centerDialogVisible = true;
          });
        } else {
          // console.log("失败");
        }
      })
    },
    // 确认按钮
    async determineClick(formName){
        const sm3 = require('sm-crypto').sm3;
        this.$refs[formName].validate(async(valid) => {
        if (valid) {
          const paramData ={
            Header:{
              CmdCode:"ModifyPwd",
              PageName:'',
              UserID:this.loginForm.username,
              UserRole:this.$store.state.user.UserRole
            },
            Data:{
              NewPwd:sm3(this.ruleForm.NewPwd),
              OldPwd:sm3(this.ruleForm.OldPwd)
            }
          }
          const res = await motify(paramData);
          if (res.Status.StatusCode===0) {
            this.$confirm('密码修改成功,请重新登录?', '提示', {
              confirmButtonText: '确定',
              showCancelButton:false,
              showClose:false,
              closeOnClickModal:false,
              closeOnPressEscape:false,
              type: 'warning'
            }).then(() => {
              this.centerDialogVisible =false
              this.$router.push('/login');
            });
          }
        } else {
            // console.log('error submit!!');
            return false;
        }
      })
    },
    closeDialog(){
      this.$refs['ruleForm'].resetFields();
    },
  }
};
</script>
<style scoped lang='scss'>
  .theme{
    margin: 20px;
    display: flex;
    flex-direction: column;
    a{
      cursor: pointer;
      padding-bottom: 10px;
      &:hover{
        color: #06b4fd;
      }
    }
  }
  .wrap{
    // position: relative;
    background: url('../../assets/login3.jpg');
    display: flex;
    align-items: center;
    height: 100vh;
    .lg-title{
      font-size: 45px;
      text-align: left;
      letter-spacing: 11px;
      font-weight: bold;
      color: #b4946e ;
      padding: 30px 120px;
      // background: linear-gradient(to right, #1743ff, #00b3ff);
      // background-clip: text;
      // color: transparent;
    }
    .main{
      width: 100%;
      height: 500px;
      min-width: 1000px;
      // background: url('../../assets/login2.jpg') #5b4d43 center top  no-repeat;
      background-size: auto 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      .login{
        color: #d6b086;
        width: 480px;
        margin-left: 55%;
        margin-top: 30px;
        background: rgba(255, 255, 255,.9);
        border-radius: 10px;
        &-name{
          font-size: 20px;
          text-align: center;
          padding: 5px 25px;
          display: flex;
          align-items: center;
          justify-content: center;
          .icon-anquandunpai{
            font-size: 24px;
            padding-right: 10px;
            color: #957d61;
          }
          span{
            line-height: 40px;
            // font-weight: bold;
          }
        }
        &-form{
          border-top: 1px solid #ddd;
          padding: 30px 25px;
          ::v-deep .el-input{
            height: 45px;
            line-height: 45px;
            background: #fff;
            border: 1px solid #eee;
            border-radius:5px;
            .el-input__inner{
              font-size: 14px;
              text-indent: 16px;
              // color: #000;
              background: none;
              border: none;
            }
            .el-input__inner::placeholder {
              // color: #000;
              letter-spacing: 2px;
            }
            .el-input__icon{
              font-size: 25px;
              color: #967d60;
            }
          }
          .form-submit{
            width: 200px;
            margin: 0 auto;
          }
          .submit{
            width: 100%;
            height: 45px;
            font-size: 18px;
            letter-spacing: 10px;
            text-indent: 10px;
            text-align: center;
            background: #a26543;
            border: none;
            margin: 25px auto 0px;
            border-radius: 5px;
          }
        }
        &-method{
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 55px;
          font-size: 20px;
          text-align: center;
          background: rgba(255, 255, 255,.8);
          border-radius: 10px;
          img{
            width: 30px;
            margin-right: 10px;
            // border-radius: 30px;
            // background: rgba(255, 255, 255, .8)
          }
          div{
            cursor: pointer;
            .iconfont{
              position: relative;
              font-size: 20px;
              padding-right: 10px;
              z-index: 2;
            }
            .icon-zhifubao{
              color: #06b4fd;
            }
            .icon-weixin{
              margin-left: 30px;
              color: #28c445;
            }
          }
          .yuan{
            position: absolute;
            width: 19px;
            height: 19px;
            background: #fff;
            border-radius: 50%;
          }
          .yuan1{
            left: 218px;
          }
          .yuan2{
            left: 338px;
          }
        }
      }
    }
  }
</style>

<style>
/* 去掉记住密码填充样式 */
input:-webkit-autofill {
  transition: background-color 5000s ease-in-out 0s;
}
input:-webkit-autofill {
    box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: #000;
}
</style>
